<template>
    <div  class="sceneDataChat">
        <el-scrollbar style="width:75rem; height:21.375rem;" :native="false" :noresize="false" ref="scrollDiv">
            <div ref="sceneDataBar" style="height:21.375rem" :style="{ width : allData.length > 15 ? allData.length * 80 + 'px' : '75rem'}"></div>
        </el-scrollbar>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { importSceneBarData, importSceneQueryData } from '../api/echartsChatApi'
import { sceneOverviewBarOption } from '../../../../../../utils/js/point'
export default {
    data() {
        return {
            allData: [],
            xAxisData: null,
            myChart: null,
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async chartRender(params) {
            if (params == '全部') {
                this.getData();
            } else {
                const res = await importSceneQueryData(params)
                this.allData = res.data.data;
                this.$nextTick(_=>{
                    this.initChart();
                    this.$refs.scrollDiv.update();
                })  
            }
        },
        async getData() {
            const res = await importSceneBarData()
            this.allData = res.data.data;
            this.$nextTick(_=>{
                this.initChart();
                this.$refs.scrollDiv.update();
            })           
        },
        initChart() {
            var xAxisData = this.allData.map(item => {return item.scenario_id})
            var subcategoryNum = this.allData.map(item => {return item.subcategory_number})
            var colorList = []
            this.allData.forEach(item => {
                if (item.main_scene === '城市') {
                    colorList.push('#4278FC')
                } else if (item.main_scene === '高速') {
                    colorList.push('#3FBC8D')
                } else {
                    colorList.push('#FAA819')
                }
            })
            if(this.myChart){
                this.myChart.dispose();
                this.myChart = null;
            }
            this.myChart = echarts.init(this.$refs.sceneDataBar);
            sceneOverviewBarOption.xAxis.data = xAxisData;
            sceneOverviewBarOption.series[0].data = subcategoryNum;
            var graphicColor = function color(params) {
                return colorList[params.dataIndex]
            }
            sceneOverviewBarOption.series[0].itemStyle.normal.color = graphicColor;
            this.myChart.setOption(sceneOverviewBarOption);
            // echart图表自适应
            window.addEventListener('resize', function() {
                this.myChart && this.myChart.resize();
            });
        }
    },
    watch:{
       allData(val,oldVal){
         this.$nextTick((_)=>{
           this.initChart()
         });
       }
    },
}
</script>

<style lang="less">
.sceneDataChat{
  height: 342px;
   &::-webkit-scrollbar {
    height: 17px !important;
   }
    .el-scrollbar__wrap {
        height: calc(100% + 20px); 
    }
  .el-scrollbar__bar{
    left: 0 !important;
    right: 0 !important;  
    .el-scrollbar__thumb{
      border-radius: 2px !important;
    }
  }
  .is-vertical {
    display: none;
  }
}
</style>